<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
	<meta charset="UTF-8">
	<title>First</title>
	<script src="js/react-0.13.4.min.js"></script>
	<script src="js/JSXTransformer.js"></script>
</head>
<body>
<div id="container"></div>

<script>

	// 最佳实践
	// https://github.com/bailicangdu/react-pxq

	var TestClick = React.createClass({
		handleClick: function(event){
			var tipE = React.findDOMNode(this.refs.tip);
			if(tipE.style.display === "none"){
				tipE.style.display = 'inline';
			}else{
				tipE.style.display = 'none';
			}
			event.stopPropagation();
			event.preventDefault();
		},
		render: function(){
			return (
				<div>
					<button onClick= {this.handleClick}>显示|隐藏</button><span ref="tip">测试点击</span>
				</div>
			);
		}
	});

	var TestInput = React.createClass({
		getInitialState: function(){
			return {
				inputContent: ''
			}
		},
		changeHandler: function(event){
			this.setState({
				inputContent: event.target.value
			});
			event.stopPropagation();
			event.preventDefault();
		},
		render: function(){
			return (
				<div>
					<input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span>
				</div>
			);
		}
	});

	React.render(
		<div>
			<TestClick/>
			<br/>
			<TestInput/>
		</div>,
		document.getElementById("container")
	);
</script>
</body>
</html>